import ChartBase from './chart-base'
import {
  deepClone,
  mergeObject
} from '@/utils'


export default class TableSingle extends ChartBase {
  constructor() {
    super()
  }

  // 基础描述
  _info = {
    name: '单行表格',
    type: 'table-single', // 图表类型
    group: 'table', // 图表分类
    component: 'table-single',
    icon: 'table-single' // 图表展示ICON
  }

  // 总 配置项
  _defaultOption = {
    tableField: [],
    formData: [],
    config: {
      slider: {
        setNum: 3
      },
      label: {
        position: '4px',
        height: 34,
        isBold: false
      },
      content: {
        position: '4px',
        height: 34,
        isBold: false
      },
      delimiter: {
        show: true,
        size: 14,
        backgroundSize: 34,
        position: '4px',
        type: 'icon',
      }
    },
    style: {
      label: {
        color: '#606266',
        fontSize: '14px',
      },
      content: {
        color: '#303133',
        fontSize: '14px',
      },
      delimiter: {
        color: '#606266',
        fontSize: '14px',
      },

    }
  }
  // 系列
  _defaultSeries = {}

  // 数据结构描述
  _dataPoolConfig = [{
    label: '字段',
    key: 'tableField',
    type: ['string', 'date', 'number'],
    limit: -1
  }]

  // 样式配置描述信息
  _styleOptionConfig = [{
    label: '展示列数',
    bindKeys: '_group.slider',
    controlType: 'group', // 展示类型 / 标题直接展示 
    controlValue: '', // 下拉默认选项 / 开关（是/否）/ 字体号
    controlProps: {},
    controlConfigs: {} //  下拉选项
  },
  {
    label: '列数',
    bindKeys: 'config.slider.setNum',
    controlType: 'slider',
    controlValue: 3,
    controlProps: {
      step: 1,
      min: 1,
      max: 4
    },
    controlConfigs: {}
  },
  {
    label: '标签文字',
    bindKeys: '_group.label',
    controlType: 'group', // 展示类型 / 标题直接展示 
    controlValue: '', // 下拉默认选项 / 开关（是/否）/ 字体号
    controlProps: {},
    controlConfigs: {} //  下拉选项
  },
  {
    label: '文字颜色',
    bindKeys: 'style.label.color',
    controlType: 'color-picker',
    controlValue: '#606266',
    controlProps: {},
    controlConfigs: {}
  },
  {
    label: '文字大小',
    bindKeys: 'style.label.fontSize',
    controlType: 'input',
    controlValue: '14px',
    controlProps: {},
    controlConfigs: {}
  },
  {
    label: '数值文字',
    bindKeys: '_group.content',
    controlType: 'group',
    controlValue: '',
    controlProps: {},
    controlConfigs: {}
  },
  {
    label: '文字颜色',
    bindKeys: 'style.content.color',
    controlType: 'color-picker',
    controlValue: '#303133',
    controlProps: {},
    controlConfigs: {}
  },
  {
    label: '文字大小',
    bindKeys: 'style.content.fontSize',
    controlType: 'input',
    controlValue: '14px',
    controlProps: {},
    controlConfigs: {}
  },
  {
    label: '分隔符',
    bindKeys: '_group.delimiter',
    controlType: 'group',
    controlValue: '',
    controlProps: {

    },
    controlConfigs: {}
  },
  {
    label: '是否显示',
    bindKeys: 'config.delimiter.show',
    controlType: 'switch', // 开关
    controlValue: true,
    controlProps: {},
    controlConfigs: {}
  },
  {
    label: '颜色',
    bindKeys: 'style.delimiter.color',
    controlType: 'color-picker',
    controlValue: '#606266',
    controlProps: {},
    controlConfigs: {}
  },
  {
    label: '大小',
    bindKeys: 'style.delimiter.fontSize',
    controlType: 'input',
    controlValue: '14px',
    controlProps: {},
    controlConfigs: {}
  },
  ]

  getOption({
    dataList = [],
    dataPoolField,
    styleOptionConfig = [],
    themeColor = []
  }) {

    let defaultOption = deepClone(this._defaultOption)

    let option = this._transformStyleOptionConfig(styleOptionConfig)

    defaultOption.tableField = dataPoolField['tableField']

    let list = {}
    if (dataList && dataList.length > 0) {
      list = dataList[0]
    }
    let field = defaultOption.tableField
    for (let i in field) {
      if (field[i].fieldName) {
        defaultOption.formData.push({
          key: field[i].fieldName,
          value: list[field[i].fieldName]
        })
      }
    }

    if (defaultOption && option) defaultOption = mergeObject(defaultOption, option)

    return defaultOption
  }

  getClickData(event) {

    return { ...event }
  }
}
